<template>
  <el-space wrap :size="props.params.eltagSize">
    <div>
      <!-- <el-tag :type="props.params.styleClass(props.params.data)">{{
        props.params.text(props.params.data)
      }}</el-tag> -->
      <!-- {{props.params.styleClass}} -->
      <!-- <el-select v-model="props.params.data.clothCode" filterable @change="selectChange" @click="clickList">
        <el-option v-for="item in options" :key="item.id" :label="item.clothCode" :value="item.clothCode" />
      </el-select> -->
      <a-select popup-container="html"  :disabled="props.params.data.letBoolNum == 2" class="bacClass" :loading="loading" :allowClear="true"
        @search="handleSearch" v-model="props.params.data.trimCharges" :filter-option="false" allow-search
        @focus="focusSel" style="width:170px;" :trigger-props="{ autoFitPopupMinWidth: true }">
        <a-option v-for="item in pageData" :label="item.charges" :value="item.charges">{{
          item.charges
        }}</a-option>
      </a-select>


    </div>
  </el-space>
</template>
  
<script setup lang="ts">
import { post } from "@/api/http";
import { ref, onMounted } from "vue";
import { Form, Message, Modal, Pagination } from "@arco-design/web-vue";
const props = withDefaults(
  defineProps<{
    params: any,
  }>(),
  {
    params: {},
  }
)
// let options = ref([])

// }
// let clickList = () => {
//   post({
//     url: "/pdm/DevFabricInfo/getFieldValue",
//     data: {
//       clothCode: ''
//     }
//   }).then(({ data, code }: any) => {
//     // console.log(data,"下拉返回");
//     console.log(data)
//     if (code === 200) {
//       options.value = data;

//     }
//   });
// }

// const greyGe = () => {
//   props.params.color(props.params)
// }

//下拉框得到焦点
const focusSel = () => {
  selCxAll({ charges: '' })
}
//下拉数据  
let pageData = ref([])
let options = ref<any>(pageData.value);
let loading = ref(false);
const handleSearch = (value: any) => {
  const ob = { charges: value }
  loading.value = true;
  selCxAll(ob);
  options.value = pageData.value;
  loading.value = false;
};

//下拉框查询
function selCxAll(val: any) {
  post({
    url: "/pdm/chargeProject/getFieldValue",
    data: val
  }).then(({ data, code }: any) => {
    if (code === 200) {
      pageData.value = data;
    } else {
      Message.error({
        content: "查询失败！",
        duration: 5000,
      });
    }
  });
}

// let selectChange = () => {
//   pageData.value.map((o) => {
//     if (props.params.data.clothCode == o.clothCode) {
//       post({
//         url: "/pdm/DevFabricInfo/getListByPlanOrder",
//         data: {
//           id: o.id
//         }
//       }).then(({ data, code }: any) => {
//         if (code === 200) {
//           props.params.color(props.params, data)
//         }
//       });
//     }
//   })
// }

onMounted(() => {

})


</script>
  
<style scoped>
.currency {
  color: blue;
}
</style>